<template>
  <view class="main">
    <!-- 顶部标识 -->
    <view class="top-tip">
      <u-icon name="clock" size="28"></u-icon>
      {{
        props.listObj.status == '1'
          ? '未开始'
          : props.listObj.status == '2'
          ? '售卖中'
          : '已售罄'
      }}
    </view>
    <view class="left-block"></view>
    <view class="right-block"></view>
    <view class="bottom-block"></view>
    <view class="bottom-r-block"></view>
    <view class="left" />
    <view class="right" />
    <view class="top" />
    <view class="bottom" />
    <view
      class="card-image"
      :style="{
        background: `url('${props.listObj.image}') no-repeat 100% 100%`,
        backgroundSize: '100% 100%'
      }"
    >
    </view>
    <view class="center-image">
      <u-image
        width="100%"
        height="100%"
        mode="aspectFit"
        :src="props.listObj.image"
      ></u-image
    ></view>
    <view class="bottom-content">
      <text class="name">{{ props.listObj.name }} </text>
      <view class="tip">
        <view class="tip-l" v-if="props.listObj.type_type == 1">星艺藏品 </view>
        <view class="tip-l" v-if="props.listObj.type_type == 2">星艺盲盒 </view>
        <view class="tip-r">
          <view class="tip-r-l" v-if="props.listObj.type_type == 1">限量</view>
          <view class="tip-r-l" v-if="props.listObj.type_type == 2"
            >发行量</view
          >
          <view class="tip-r-r"
            >{{ props.listObj.all_num || props.listObj.total_num }}份</view
          >
        </view>
      </view>
      <view class="logo" v-if="props.listObj.author_avatar">
        <u-image
          style="margin-right: 20rpx"
          width="38"
          height="38"
          mode="aspectFit"
          :src="props.listObj.author_avatar"
        ></u-image>
        <view> {{ props.listObj.author_name }}</view>
      </view>
      <view class="price">¥ {{ props.listObj.price }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  listObj: {
    type: Object,
    default: {}
  }
})
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  width: 100%;
  height: 950rpx;
  .top-tip {
    color: #8b8b8b;
    position: absolute;
    top: 90rpx;
    left: 90rpx;
    z-index: 2;
    background-color: #070707;
    width: 140rpx;
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 10rpx;
  }
  .card-image {
    position: absolute;
    width: 100%;
    height: 650rpx;
    filter: blur(20rpx);
    top: 30rpx;
  }
  .center-image {
    padding: 80rpx 90rpx 0 90rpx;
    height: 620rpx;
  }
  .left {
    position: absolute;
    height: 100%;
    width: 32rpx;
    background-color: #111723;
    z-index: 1;
  }
  .right {
    position: absolute;
    height: 100%;
    width: 32rpx;
    background-color: #111723;
    z-index: 1;
    right: 0;
  }
  .top {
    position: absolute;
    height: 40rpx;
    width: 100%;
    background-color: #111723;
    z-index: 1;
    top: 0;
  }
  .bottom {
    position: absolute;
    height: 50rpx;
    width: 100%;
    background-color: #111723;
    z-index: 1;
    bottom: 0;
  }
}
.left-block {
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  z-index: 1;
  right: 30rpx;
  top: 40rpx;
  background-image: radial-gradient(
    circle at bottom left,
    transparent 50rpx,
    #111723 50rpx
  );
}
.right-block {
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  z-index: 1;
  left: 30rpx;
  top: 40rpx;
  background-image: radial-gradient(
    circle at bottom right,
    transparent 50rpx,
    #111723 50rpx
  );
}
.bottom-block {
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  z-index: 1;
  left: 30rpx;
  top: 620rpx;
  background-image: radial-gradient(
    circle at top right,
    transparent 50rpx,
    #231f30 50rpx
  );
}
.bottom-r-block {
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  z-index: 1;
  right: 30rpx;
  top: 620rpx;
  background-image: radial-gradient(
    circle at top left,
    transparent 50rpx,
    #231f30 50rpx
  );
}
.bottom-content {
  position: absolute;
  width: calc(100% - 60rpx);
  height: 280rpx;
  background-color: #231f30;
  z-index: 1;
  left: 0;
  margin: auto;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  padding: 30rpx;
  text-align: left;
  background-image: url(../../../static/images/cangpin.png);
  .name {
    font-size: 35rpx;
    color: #fff;
  }
  .tip {
    display: flex;
    padding-top: 18px;
    .tip-l {
      width: 140rpx;
      height: 55rpx;
      background-image: linear-gradient(to right, #9f56ff, #9f56ff);
      border-radius: 20rpx;
      line-height: 55rpx;
      text-align: center;
      color: #fff;
    }
    .tip-r {
      display: flex;
      margin-left: 20rpx;
      width: 220rpx;
      .tip-r-l {
        width: 48%;
        background: #9f56ff;
        line-height: 55rpx;
        text-align: center;
        color: #fff;
      }
      .tip-r-r {
        flex: 1;
        background: #68637e;
        line-height: 55rpx;
        text-align: center;
        color: #fff;
      }
    }
  }
  .logo {
    padding-top: 24rpx;
    display: flex;
    font-size: 32rpx;
    color: #908e94;
    align-items: center;
    font-weight: 600;
  }
  .price {
    position: absolute;
    right: 40rpx;
    bottom: 20rpx;
    font-size: 48rpx;
    color: #fff;
  }
}
</style>
